<template>
  <div class="component-system">
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>系统首页
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(0)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe662;</span>刷新
          </el-button>
        </div>
      </div>
    </div>
    <!-- 中间模块 -->
    <div class="system-main">
      <ul>
        <li style="width:240px;margin-left:0;">
          <span class="icon_style icon_mr iconfont">&#xe625;</span>
          <!-- <img src="../../../static/index/index_2.png" alt> -->
          <div class="title">
            <span>在建项目</span>
            <div>{{totalMoney.inConstructionNum}}</div>
          </div>
        </li>

        <li>
          <span class="icon_style iconfont">&#xe640;</span>
          <!-- <img src="../../../static/index/index_1.png" alt> -->
          <div class="title">
            <span>竣工项目</span>
            <div>{{totalMoney.closeoutNum}}</div>
          </div>
        </li>
        <li v-if="ms_roleName=='ProjectClerk'||ms_roleName=='ProjectManager'">
          <span class="icon_style icon_mr iconfont">&#xe610;</span>
          <!-- <img src="../../../static/index/index_1.png" alt> -->
          <div class="title">
            <span>施工队</span>
            <div>{{totalMoney.teamsNum}}</div>
          </div>
        </li>
        <li v-if="ms_roleName=='WorkTeamManager'">
          <span class="icon_style icon_mr iconfont">&#xe614;</span>
          <!-- <img src="../../../static/index/index_1.png" alt> -->
          <div class="title">
            <span>施工队个数</span>
            <div>7</div>
          </div>
        </li>
        <li v-if="ms_roleName=='AreaManager'">
          <span class="icon_style icon_mr iconfont">&#xe621;</span>
          <!-- <img src="../../../static/index/index_1.png" alt> -->
          <div class="title">
            <span>施工公司</span>
            <div>7</div>
          </div>
        </li>
        <li>
          <span class="icon_style icon_mr iconfont">&#xe668;</span>
          <!-- <img src="../../../static/index/index_1.png" alt> -->
          <div class="title">
            <span>项目金额统计(万元)</span>
            <div>{{parseFloat(totalMoney.budgetMoney).toFixed(2)}}</div>
          </div>
        </li>
        <li
          v-if="ms_roleName=='CenterClerk'||ms_roleName=='CenterDeputy'||ms_roleName=='CenterBOSS'"
        >
          <span class="icon_style icon_mr iconfont">&#xe699;</span>
          <!-- <img src="../../../static/index/index_1.png" alt> -->
          <div class="title">
            <span>项目部</span>
            <div>200</div>
          </div>
        </li>
        <li v-if="ms_roleName=='CenterFinanceManager'||ms_roleName=='CenterFinanceClerk'">
          <span class="icon_style icon_mr iconfont">&#xe601;</span>
          <!-- <img src="../../../static/index/index_1.png" alt> -->
          <div class="title">
            <span>本月报销</span>
            <div>200</div>
          </div>
        </li>
      </ul>
      <div class="thing">
        <div class="thing-head">
          <span style="margin-left:20px;font-size:14px;font-weight:700">待处理事务</span>
        </div>
        <ul class="list">
          <!--需后台修改（将待入库甲供材料跟待入库施工队退料合并）-->
          <li
            @click="$router.push({name:'unSureInStore'})"
            v-if="accountInfo.hasOwnProperty('armorForMaterialListCount')"
          >
            <span style="float:left;">待确认入库</span>
            <span style="float:right">（{{accountInfo.armorForMaterialListCount}}）</span>
          </li>
          <li
            v-if="accountInfo.hasOwnProperty('waitCloseWorkTeamComCount')"
            @click="$router.push({name:'unPayCompany'})"
          >
            <span style="float:left;">待结算施工公司</span>
            <span style="float:right">（{{accountInfo.waitCloseWorkTeamComCount}}）</span>
          </li>
          <li
            v-if="accountInfo.hasOwnProperty('toBeConfirmedInStoreCounts')"
            @click="$router.push({name:'unMaterSureIn'})"
          >
            <span style="float:left;">待确认入库</span>
            <span style="float:right">（{{accountInfo.toBeConfirmedInStoreCounts}}）</span>
          </li>
          <li
            v-if="accountInfo.hasOwnProperty('matWarning')"
            @click="$router.push({name:'unNeedMater'})"
          >
            <span style="float:left;">需领取材料</span>
            <span style="float:right">（{{accountInfo.matWarning}}）</span>
          </li>
          <li
            v-if="accountInfo.hasOwnProperty('projectCount') && ms_roleName=='AreaManager'"
            @click="$router.push({name:'bigAreaUnAcceptance'})"
          >
            <span style="float:left;">待验收项目</span>
            <span style="float:right">（{{accountInfo.projectCount}}）</span>
          </li>

          <li
            v-if="accountInfo.hasOwnProperty('bmkxmdys') && ms_roleName=='ProjectClerk'"
            @click="$router.push({name:'bmkUnAcceptance'})"
          >
            <span style="float:left;">待验收项目(补盲扩)</span>
            <span style="float:right">（{{accountInfo.bmkxmdys}}）</span>
          </li>

          <li
            v-if="accountInfo.hasOwnProperty('frozenStoreListRowCounts')"
            @click="$router.push({name:'unMaterSureMater'})"
          >
            <span style="float:left;">待确认材料</span>
            <span style="float:right">（{{accountInfo.frozenStoreListRowCounts}}）</span>
          </li>
          <!--<li v-if="accountInfo.hasOwnProperty('getbmkCloseproject')" @click="$router.push({name:'unMaterSureMater'})">
            <span style="float:left;">待确认材料</span>
            <span style="float:right">（{{accountInfo.getbmkCloseproject}}）</span>
          </li>-->

          <li
            v-if="ms_roleName == 'ProjectManager' || ms_roleName == 'CenterClerk' || ms_roleName == 'CenterDeputy' || ms_roleName == 'CenterBOSS' || ms_roleName == 'WorkTeamLeader'"
            @click="$router.push({name:'unProject'})"
          >
            <span style="float:left;">待建项项目</span>
            <span style="float:right">（{{accountInfo.projectAddCount}}）</span>
          </li>
          <!--待建项项目 (非项目部文员)      待建项项目 (项目部文员)-->
          <!-- <li v-if="ms_roleName == 'ProjectClerk'" @click="$router.push({name:'unTakePro'})">
            <span style="float:left;">待建项项目</span>
            <span style="float:right">（{{accountInfo.projectAddCount}}）</span>
          </li> -->
          <li
            v-if="accountInfo.hasOwnProperty('Contract')"
            @click="$router.push({name:'unContract'})"
          >
            <span style="float:left;">待收款合同</span>
            <span style="float:right">（{{accountInfo.Contract}}）</span>
          </li>

          <!-- 缺一个 待开票  财务 -->
          <li
            v-if="accountInfo.hasOwnProperty('cwdkp')"
            @click="$router.push({name:'makeContract'})"
          >
            <span style="float:left;">待开票合同</span>
            <span style="float:right">（{{accountInfo.cwdkp}}）</span>
          </li>

          <!--(管理部/boss)-->
          <li
            v-if="accountInfo.hasOwnProperty('AuditTask')"
            @click="$router.push({name:'projects'})"
          >
            <span style="float:left;">待审核项目</span>
            <span style="float:right">（{{accountInfo.AuditTask}}）</span>
          </li>
          <li
            v-if="accountInfo.hasOwnProperty('selectWaitProInvoiceAmount')"
            @click="$router.push({name:'unContract'})"
          >
            <span style="float:left;">待开票收款合同</span>
            <span style="float:right">（{{accountInfo.selectWaitProInvoiceAmount}}）</span>
          </li>
        <!--  <li
            v-if=" (ms_roleName == 'CenterFinanceClerk' || ms_roleName == 'CenterFinanceManager') && accountInfo.hasOwnProperty('waitPayCount')"
            @click="$router.push({name:'teamSettle'})"
          >
            <span style="float:left;">待处理施工队结算</span>
            <span style="float:right">（{{accountInfo.waitPayCount}}）</span>
          </li>-->
          <li
            v-if="accountInfo.hasOwnProperty('waitPayCount')"
            @click="$router.push({name:'unPayTeam'})"
          >
            <span style="float:left;">待结算施工队</span>
            <span style="float:right">（{{accountInfo.waitPayCount}}）</span>
          </li>
          <li
            v-if="accountInfo.hasOwnProperty('projectCount') && ms_roleName!='AreaManager'"
            @click="$router.push({name:'unAcceptance'})"
          >
            <span style="float:left;">待验收项目</span>
            <span style="float:right">（{{accountInfo.projectCount}}）</span>
          </li>
          <li
            v-if="accountInfo.hasOwnProperty('sendOrdersCount')"
            @click="$router.push({name:'unTakeOrder'})"
          >
            <span style="float:left;">待处理派单</span>
            <span style="float:right">（{{accountInfo.sendOrdersCount}}）</span>
          </li>
          <!--<li
            v-if="accountInfo.hasOwnProperty('armorForMaterialListCount')"
            @click="$router.push({name:'unSupply'})"
          >
            <span style="float:left;">待入库甲供材料</span>
            <span style="float:right">（{{accountInfo.armorForMaterialListCount}}）</span>
          </li>
          <li
            v-if="accountInfo.hasOwnProperty('returnMaterialCheckListCount')"
            @click="$router.push({name:'unInputMater'})"
          >
            <span style="float:left;">待入库施工队退料</span>
            <span style="float:right">（{{accountInfo.returnMaterialCheckListCount}}）</span>
          </li>-->
          <li
            v-if="accountInfo.hasOwnProperty('checkListCount') && ms_roleName == 'ProjectWarehouse'"
            @click="$router.push({name:'pending'})"
          >
            <span style="float:left;">待处理材料</span>
            <span style="float:right">（{{accountInfo.checkListCount}}）</span>
          </li>
          <li
            v-if="accountInfo.hasOwnProperty('checkListCount') && ms_roleName == 'ProjectManager'"
            @click="$router.push({name:'material'})"
          >
            <span style="float:left">待审批采购</span>
            <span style="float:right">（{{accountInfo.checkListCount}}）</span>
          </li>
        </ul>
      </div>

      <!--<div class="short">
        <div class="short-head">
          <span style="margin-left:20px;font-size:14px;font-weight:700">快捷入口</span>
        </div>
        <ul class="short-ul">
          <li
            v-if="ms_roleName=='ProjectClerk'"
            @click="$router.push({ name: 'addFalsecontract' })"
          >
            <span class="iconfont">&#xe627;</span>
            <div>添加单项合同</div>
          </li>

          <li v-if="ms_roleName=='ProjectClerk'" @click="$router.push({ name: 'projectList' })">
            <span class="iconfont">&#xe61c;</span>
            <div>项目列表</div>
          </li>

          <li
            v-if="ms_roleName!='ProjectClerk' && ms_roleName!='AreaManager' && ms_roleName!='WorkTeamManager'"
            @click="$router.push({ name: 'contractList' })"
          >
            <span class="iconfont">&#xe61c;</span>
            <div>合同列表</div>
          </li>

          <li @click="$router.push({ name: 'teamProject' })">
            <span class="iconfont">&#xe696;</span>
            <div>施工管理</div>
          </li>

          <li @click="$router.push({ name: 'proStock' })">
            <span class="iconfont">&#xe658;</span>

            <div>材料使用</div>
          </li>
          <li
            v-if="ms_roleName!='ProjectClerk' && ms_roleName!='AreaManager' && ms_roleName!='WorkTeamManager'"
            @click="$router.push({ name: 'makeBudget' })"
          >
            <span class="iconfont">&#xe639;</span>
            <div>工程概算</div>
          </li>
          <li
            v-if="ms_roleName == 'ProjectClerk' || ms_roleName == 'AreaManager'"
            @click="$router.push({ name: 'expansion' })"
          >
            <span class="iconfont">&#xe61f;</span>
            <div>补盲扩项目</div>
          </li>
        </ul>
      </div>-->
    </div>

    <!-- 工单池 大区-->
    <div class="orderPool" v-if=" ms_roleName == 'AreaManager'">
      <div class="component-listHeader">
        <div class="search-header">
          <div class="left-title">
            <p class="left-text">
              <span class="iconfont">&#xe61e;</span>
              工单池
            </p>
            <div class="right">
            </div>
          </div>
        </div>
      </div>
      <div class="table">
        <el-table
          ref="multipleTable"
          :data="orderPoolInfo"
          tooltip-effect="dark"
          style="width:100%"
          border
        >
          <el-table-column label="序号" width="50" align="center" type="index"></el-table-column>
          <el-table-column label="工单委派日期" width="110" align="center" prop="time">
            <template slot-scope="scope">{{scope.row.time | timeFilter}}</template>
          </el-table-column>
          <el-table-column label="工单号" align="center" width="110" prop="no"></el-table-column>
          <el-table-column label="所属单位" align="center" width="110" prop="org"></el-table-column>
          <el-table-column label="五级站点" align="center" width="110" prop="station"></el-table-column>
          <el-table-column label="需求内容" align="center" prop="content"></el-table-column>
          <el-table-column label="工单状态" align="center" width="110" prop="progress"></el-table-column>
        </el-table>
      </div>
      <div class="component-paging" v-if="orderPoolInfo.length>0">
        <div class="table-bottom">
          <div class="bottom-left"></div>
          <div class="paging">
            <div class="paging-left">
              <p>
                共
                <span>{{Math.ceil(total/pageSize)}}</span> 页/
                <span>{{total}}</span> 条数据
              </p>
            </div>
            <el-pagination
              background
              @size-change="SizeChange($event,dataInit,currentPage,pageSize)"
              @current-change="CurrentChange($event,dataInit,currentPage,pageSize)"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30]"
              :page-size="pageSize"
              layout="sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </div>

    </div>

    <!-- 工单池 公司-->
    <div class="orderPool" v-if="ms_roleName == 'WorkTeamManager'">
      <div class="component-listHeader">
        <div class="search-header">
          <div class="left-title">
            <p class="left-text">
              <span class="iconfont">&#xe61e;</span>
              工单池
            </p>
            <div class="right">

            </div>
          </div>
        </div>
      </div>

      <div class="table">
        <el-table
          ref="multipleTable"
          :data="orderPoolInfoComp"
          tooltip-effect="dark"
          style="width:100%"
          border
        >
          <el-table-column label="序号" width="50" align="center" type="index"></el-table-column>
          <el-table-column label="工单委派日期" width="110" align="center" prop="time">
            <template slot-scope="scope">{{scope.row.time | timeFilter}}</template>
          </el-table-column>
          <el-table-column label="工单号" align="center" width="110" prop="no"></el-table-column>
          <el-table-column label="所属单位" align="center" width="110" prop="org"></el-table-column>
          <el-table-column label="五级站点" align="center" width="110" prop="name"></el-table-column>
          <el-table-column label="需求内容" align="center" prop="content"></el-table-column>
          <el-table-column label="工单状态" align="center" width="110" prop="receive_status"></el-table-column>
          <el-table-column label="操作" align="center" width="85">
            <template slot-scope="scope">
              <a
                class="options"
                @click.prevent="takeCompList(scope.row.proId)"
              >抢单</a>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="component-models">
        <el-dialog title="派单" :visible.sync="orderPoolDialog.flag" width="500px">
          <el-form
            :model="orderPoolDialog.list"
            ref="changeOrder"
            label-width="150px"
            class="demo-ruleForm"
          >
            <el-form-item label="施工公司:" style="text-align:left;">
              <el-select v-model="orderPoolDialog.comp" placeholder="请选择施工公司" @change="getLeader">
                <el-option
                  v-for="item in orderPoolDialog.options"
                  :key="item.label"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="公司负责人:">
              <span style="float: left;">{{}}</span>
            </el-form-item>

            <el-form-item label="备注:" style="text-align:left;">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="orderPoolDialog.remark"
                style="width:220px;"
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="orderPoolDialog.flag = false">取消</el-button>
            <el-button @click="sendOrder">派单</el-button>
          </span>
        </el-dialog>
      </div>
    </div>

    <div class="echarts" v-show="ms_roleName != 'WorkTeamManager' && ms_roleName != 'AreaManager'">
      <div class="navCharts">收款合同统计</div>
      <div class="box">
        <div class="right" v-show="contractSum.finalAcceptMoney>0 || contractSum.preAcceptMoney>0 || contractSum.prepayMoney>0 || contractSum.procesMoney>0" id="echart2"></div>
        <div v-show="contractSum.finalAcceptMoney<=0 && contractSum.preAcceptMoney<=0 && contractSum.prepayMoney<=0 && contractSum.procesMoney<=0" style="height: 50px;width:100%;text-align: center;padding-top: 25px;">暂无收款合同统计~</div>
      </div>
    </div>

    <div class="echarts" v-show="ms_roleName!='ProjectClerk'&&ms_roleName!='ProjectManager' && ms_roleName != 'WorkTeamManager' && ms_roleName != 'AreaManager'">
      <div class="navCharts">公司盈利统计</div>
      <div class="box">
        <div class="right" id="echart1"></div>
      </div>
    </div>

    <div class="echarts" v-show="ms_roleName != 'WorkTeamManager' && ms_roleName != 'AreaManager'">
      <div class="navCharts">项目总数统计</div>
      <div class="box">
        <div class="left">
          <p>本年项目总数</p>
          <p>1000</p>
          <p>
            <span>10%</span>同比上周
          </p>
        </div>
        <div class="right" id="echart"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "system",
  data() {
    return {
      ms_roleName: localStorage.getItem("roleName"),
      menuList: JSON.parse(localStorage.getItem("ms_limit")),
      accountInfo: {},
      // 工单池分页属性
      currentPage: 1,
      pageSize: 10,
      total: 1,
      // 工单池列表数据
      orderPoolInfo: [],

      // 工单池-公司
      orderPoolInfoComp: [],
      // 工单池派单弹窗
      orderPoolDialog: {
        list: {},
        flag: false,
        options: [{}],
        comp: "",
        remark: ""
      },
      totalMoney:{},//第一块金额的统计
      contractSum:{},//收款合同统计
    };
  },
  mounted() {
    this.echart();
    this.undoList();
    this.moneyList();
    this.countContract();
    this.projectCount();
    if(localStorage.getItem("roleName")=='AreaManager' || localStorage.getItem("roleName")=='WorkTeamManager'){
      this.dataInit();
    }
  },
  methods: {
    //第一块金额的统计
    moneyList(){
      let suCb = res => {
        this.totalMoney = res.data.data;
        console.log(res.data.data);
      };
      let palyParam = {
        url: "/api/web/proBudgetTableCol/getHomeProjectAndBudgetDetails",
        methods: "post",
        data: {},
        success: suCb,
      };
      this.$https(palyParam);
    },
    //收款合同统计
    countContract(){
      let suCb = res => {
        this.contractSum = res.data.data;
        console.log(res.data.data);
      };
      let palyParam = {
        url: "/api/web/proContract/getCollectionContractStatistics",
        methods: "post",
        data: {},
        success: suCb,
      };
      this.$https(palyParam);
    },
    //项目总统计
    projectCount(){
      let suCb = res => {
        console.log(res.data.data);
      };
      let palyParam = {
        url: "/api/web/proProject/getTotalProjectStatistics",
        methods: "post",
        data: {
          count: "",
          period: ""
        },
        success: suCb,
      };
      this.$https(palyParam);
    },
    undoList() {
      let that = this;
      let suCb = function(res) {
        that.accountInfo = res.data.data;
        console.log(res.data);
      };
      let erCb = function(res) {
        console.log(res);
      };
      let postData = {};
      let palyParam = {
        url: "/api/web/indexPage/getIndexPageResult",
        methods: "post",
        data: postData,
        success: suCb,
        error: erCb
      };
      that.$https(palyParam);
    },
    echart() {
      var dom = document.getElementById("echart"),
        dom2 = document.getElementById("echart1"),
        dom3 = document.getElementById("echart2"),
        myChart1 = this.echarts.init(dom2),
        myChart2 = this.echarts.init(dom3);
      var myChart = this.echarts.init(dom);
      myChart1.setOption({
        title: {
          subtext: "项目部统计",
          x: "left",
          padding: 20,
          textStyle: {
            fontSize: 12,
            fontWeight: "bolder",
            color: "#666"
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          right: "45%",
          bottom: "40%",
          orient: "vertical",
          data: [
            "湛江项目部",
            "东莞项目部",
            "广州项目部",
            "深圳项目部",
            "武汉项目部"
          ]
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["25%", "50%"],
            data: [
              { value: 335, name: "湛江项目部" },
              { value: 310, name: "东莞项目部" },
              { value: 234, name: "广州项目部" },
              { value: 234, name: "深圳项目部" },
              { value: 853, name: "武汉项目部" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ],
        color: ["#fdbf74", "#68c1b8", "#ff7878", "#a4adbd", "#686d78"]
      });
      myChart2.setOption({
        title: {
          subtext: "收款合同统计",
          x: "left",
          padding: 20,
          textStyle: {
            fontSize: 12,
            fontWeight: "bolder",
            color: "#666"
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          right: "45%",
          bottom: "40%",
          orient: "vertical",
          data: ["待收预付款", "待收进度款", "待收结算款", "待收考核款"]
        },
        series: [
          {
            name: "收款来源",
            type: "pie",
            radius: "55%",
            center: ["25%", "50%"],
            data: [
              { value: this.contractSum.prepayMoney, name: "待收预付款" },
              { value: this.contractSum.procesMoney, name: "待收进度款" },
              { value: this.contractSum.preAcceptMoney, name: "待收结算款" },
              { value: this.contractSum.finalAcceptMoney, name: "待收考核款" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ],
        color: ["#fdbf74", "#68c1b8", "#ff7878", "#a4adbd", "#686d78"]
      });
      // 绘制图表
      myChart.setOption({
        title: {
          text: "近一周项目总数统计",
          padding: 20,
          textStyle: {
            fontSize: 12,
            fontWeight: "bolder",
            color: "#666"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#1abc9c"
            }
          }
        },
        color: ["rgba(26,188,156,0.7)", "#4cd5ce"],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "07-01周一",
              "07-02周二",
              "07-03周三",
              "07-04周四",
              "07-05周五",
              "07-06周六",
              "07-07周日"
            ]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210]
          }
        ]
      });
    },
    // 工单池表格请求
    dataInit() {
      let that = this,
        suCb = res => {
          console.log(res);
          if (this.ms_roleName == "AreaManager") {
            that.orderPoolInfo = res.data.data.records;
            that.total = res.data.data.rowCount;
          } else {
            that.orderPoolInfoComp = res.data.data;
            that.total = res.data.data.rowCount;
          }
        };
      let erCb = res => {
        console.log(res);
      };
      let params = {
        url: "",
        methods: "post",
        data: {
          pageSize: that.pageSize + "",
          pageCurrent: that.currentPage + ""
        },
        success: suCb,
        error: erCb
      };
      if (this.ms_roleName == "AreaManager") {
        params.url = "/api/web/proWorkOrderPool/getWorkOrder";
      } else {
        params.url = "/api/web/proWorkOrderPool/getWorkOrderCom";
      }
      that.$https(params);
    },
    // 获取工单池施工公司列表
    workCompList(id) {
      this.orderPoolDialog.flag = true;
    },
    // 工单池 施工公司--抢单
    takeCompList(id) {
      let that = this,
        suCb = res => {
          console.log(res);
          if (res.data.data.proNum < res.data.data.limtNum) {
            that.$router.push({ name: "takeOrder", params: { proId: id } });
          } else {
            that.$erMsg("已超过接单上限！");
          }
        };
      let erCb = res => {
        console.log(res);
      };
      let params = {
        url: "/api/web/proProject/ifBMKProTooMuch",
        methods: "post",
        data: {},
        success: suCb,
        error: erCb
      };
      that.$https(params);
    },
    // 获取下拉框对应的负责人
    getLeader() {},
    // 派单确定按钮
    sendOrder() {}
  }
};
</script>

<style scoped>
.icon_style {
  font-size: 55px;
  color: #1abc9c;
}
.icon_mr {
  margin-right: 15px;
}

.system-main {
  width: 1100px;
  margin: 20px auto;
}
.system-main ul {
  overflow: hidden;
}

.system-main ul li {
  width: 230px;
  height: 90px;
  border: 1px solid #e4e4e4;
  float: left;
  margin-left: 27px;
  padding-top: 24px;
  padding-left: 20px;
}
.system-main ul li img {
  width: 66px;
  height: 50px;
  float: left;
}

.system-main ul li .title {
  display: inline-block;
  margin-right: 30px;
  font-size: 14px;
  color: #999;
}
.system-main ul li .title div {
  margin-top: 10px;
  font-size: 20px;
  font-weight: 700;
  color: #666666;
}

.thing {
  width: 100%;
  margin-top: 20px;
}
.thing .thing-head {
  width: 100%;
  height: 45px;
  background-color: #f3f3f3;
  border: 1px solid #e4e4e4;
  text-align: left;
  line-height: 45px;
  color: #666666;
}

.system-main .list {
  width: 100%;
  border: 1px solid #e4e4e4;
  border-top: none;
  padding-bottom: 40px;
}

.system-main .list li {
  width: 300px;
  height: 17px;
  border: none;
  margin-right: 15px;
  border-bottom: 1px solid #f2f2f2;
  padding-bottom: 5px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  margin-left: 20px;
}
.system-main .list li span:first-of-type:hover {
  color: #1abc9a;
}

.system-main .list li span:last-of-type {
  color: red;
}

.short {
  margin-top: 20px;
}

.short-head {
  width: 100%;
  height: 45px;
  background-color: #f3f3f3;
  border: 1px solid #e4e4e4;
  text-align: left;
  line-height: 45px;
  color: #666666;
}
.short .short-ul {
  border: 1px solid #e4e4e4;
  border-top: none;
  height: 165px;
  width: 100%;
}
.short .short-ul li {
  width: 118px;
  height: 135px;
  float: left;
  margin-left: 0px;
  margin-right: 20px;
  border: none;
  cursor: pointer;
  text-align: center;
  padding-right: 20px;
}

.short .short-ul li:hover {
  background-color: #f3f3f3;
}

.short .short-ul li:hover div {
  color: #1abc9a;
}

.short .short-ul li span {
  font-size: 80px;
}

.short .short-ul li div {
  margin-top: 10px;
  color: #666;
  font-size: 14px;
}
.short .short-ul .iconfont {
  color: #9c9c9c;
  font-size: 50px;
}
.echarts {
  border: 1px solid #e4e4e4;
  width: 1100px;
  margin: 20px auto;
  box-sizing: border-box;
}
.echarts .navCharts {
  height: 45px;
  background-color: #f3f3f3;
  border-bottom: 1px solid #e4e4e4;
  text-align: left;
  line-height: 45px;
  color: #666;
  font-weight: bold;
  font-size: 14px;
  padding-left: 20px;
}
.box {
  display: flex;
  flex-direction: row;
  font-size: 14px;
  color: #666;
}
.box .left {
  width: 200px;
  border-right: 1px solid #e4e4e4;
}
.box .left p {
  margin-top: 20px;
}
.box .right {
  width: 100%;
  height: 500px;
}

.box #echart1 {
  height: 400px;
  width: 100%;
}

/* 工单池样式 */
.component-listHeader .search-header {
  width: 1100px;
  box-sizing: border-box;
  border: 1px solid rgba(228, 228, 228, 1);
  background-color: rgba(255, 255, 255, 1);
  margin: 20px auto 0;
  border-bottom: 0;
}

.component-listHeader .search-header .left-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(243, 243, 243, 1);
  height: 45px;
  box-sizing: border-box;
}

.component-listHeader .search-header .left-title .left-text {
  width: 20%;
  color: #666;
  font-family: "微软雅黑";
  font-weight: 400;
  font-size: 12px;
  line-height: 45px;
  text-align: left;
  margin: 0 0 0 30px;
}

.component-listHeader .search-header .right {
  width: 70%;
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
}

.component-listHeader .search-header .right button {
  padding: 0 15px;
  height: 30px;
  width: 80px;
  margin: 6px 5px;
  line-height: 30px;
  font-size: 14px;
  color: #666;
  background-color: #fff;
  border: 1px solid #ccc;
}

.component-listHeader .search-header .right button:hover {
  background-color: #f3f3f3;
}

.component-listHeader .search-header .right .right-select-margin {
  margin-top: 6px;
  margin-right: 8px;
}
.table {
  width: 1100px;
  margin: 0 auto;
}
a {
  cursor: pointer;
  color: #1abc9c;
}
</style>
